/*登录组件*/
import React from 'react'
import './login.css'
import { Icon, Form, Divider} from 'semantic-ui-react'
import axios from 'axios'
import { withRouter } from 'react-router-dom'
class Login extends React.Component{
    constructor(props){
        super(props)
        this.state={
            username:'',
            password:''
        }
    }
    handleLogin=()=>{
        //控制登录
        // console.log(this.state.username)
        // console.log(this.state.password)
        axios.post('users/login',{
            uname: this.state.username,
            pwd: this.state.password
        }).then(res=>{
            // console.log(res)
            //登录成功后跳转到主页面
            if(res.meta.status===200){
                //保存token到本地缓存中
                sessionStorage.setItem('mytoken', res.data.token)
                let {history}=this.props
                history.push('/home')
            }
        })
    }
    handleUsername=(e)=>{
        this.setState({
            username:e.target.value
        })
    }
    handlePassword=(e)=>{
        // e.persist()
        // console.log(e.target)
        this.setState({
            password:e.target.value
        })
    }
    render(){
        return(
            <div className="login-container">
              {/*顶部的logo */}  
              <div className="login-logo">
                <Icon name='home' size='huge'/>
              </div>
              <div className="login-form">
                  <Form>
                    <Form.Input
                        icon='user' 
                        iconPosition='left' 
                        placeholder='请输入用户名...'
                        size='big'
                        name='username'
                        required
                        onChange={this.handleUsername}
                        value={this.state.username}
                    />
                    <Form.Input
                        icon='lock' 
                        iconPosition='left' 
                        placeholder='请输入用户名...'
                        size='big'
                        name='password'
                        required
                        onChange={this.handlePassword}
                        value={this.state.password}
                    />
                    <Form.Button primary fluid onClick={this.handleLogin}>登录</Form.Button>
                  </Form>
                  <Divider horizontal>.....</Divider>
                <div className="login-third">
                  <Icon name='qq' size='large'/>
                  <Icon name='weixin' size='large'/>
                </div>   
              </div>
            </div>
        )        
    }
}
export default withRouter(Login);